<template>
  <div>
    <!-- 咨询分类新增 -->
    <el-form ref="ruleForm" v-loading="loading" :model="ruleForm" :rules="rules" label-width="100px" label-position="right">
      <el-form-item label="名称：" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <el-form-item label="归属部门：" prop="deptId">
        <el-cascader
          v-model="ruleForm.deptId"
          :options="options"
          :props="{ checkStrictly: true,label: 'deptName',value:'id' }"
          clearable
          class="el-select-y"
          style="width:100%"
          @change="changeTree"
        />
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-radio-group v-model="ruleForm.status">
          <el-radio label="启用" />
          <el-radio label="停用" />
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item>
        <el-button class="submit" @click="submitForm('ruleForm')">保存</el-button>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    consultRow: {
      type: [Object, Number],
      default: () => {},
    },
    number: {
      type: Number,
      default: 1,
    },
    visibles: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      loading: false,
      ruleForm: {},
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        deptName: [
          { required: true, message: '请选择归属部门', trigger: 'change' },
        ],
      },
      options: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则' }],
      }],
    };
  },
  watch: {
    consultRow: {
      handler(newRow) {
        this.consultRow !== 1 ? this.ruleForm = this.consultRow : this.ruleForm = { "status": "启用" };
        this.$refs['ruleForm'].resetFields();
        this.getAllDeptTree();
      },
      // deep: true,
    },
    visibles: {
      handler(newBool) {
        if (!newBool) {
          this.$refs['ruleForm'].resetFields();
        }
      },
    },
  },
  mounted() {
    this.consultRow !== 1 ? this.ruleForm = this.consultRow : this.ruleForm = { "status": "启用" };
    console.log(this.ruleForm, "this.ruleForm");
    this.getAllDeptTree();
  },
  methods: {
    reset() {
      this.$refs['ruleForm'].resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = '';
          let msg = '';
          this.loading = true;
          if (this.number === 1) {
            url = 'seting/consulting/addConsult';
            msg = '新增咨询分类';
          } else {
            url = 'seting/consulting/eaditConsult';
            msg = '修改咨询分类';
          }
          typeof (this.ruleForm.deptId) === 'object' ? this.ruleForm.deptId = this.ruleForm.deptId[this.ruleForm.deptId.length - 1] : this.ruleForm.deptId = this.ruleForm.deptId;
          this.options.forEach(item => {
            console.log(item, "dhsdhfuj");
            if (item.id === this.ruleForm.deptId) {
              this.ruleForm.deptName = item.deptName;
            }
          });
          this.$api[url](this.ruleForm).then(res => {
            if (res.code !== 200) return this.$message.error(msg + '失败');
            this.loading = false;
            this.$message.success(msg + '成功');
            this.$emit('success');
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    getAllDeptTree() {
      this.$api['seting/consulting/getAllDeptTree']({}).then(res => {
        if (res.code !== 200) return this.$message.error("查询医院部门树型数据失败");
        this.options = res.data;
        // this.$message.success('查询咨询分类数据成功');
        // console.log(res, "查询医院部门树型数据失败");
      });
    },
    changeTree(val) { // 树形结构的值发生改变时
      console.log(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.dialog-magin-y{
  margin: 0 150px;
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
  margin-bottom: 18px;
}
</style>
